let QRCanvas=null;
$(() => {
    new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationClickable: true,
        direction: 'vertical',
        onInit:swiper=>{
            //let activeIndex = swiper.activeIndex;
            //console.log(activeIndex)
            $('#portrait img').fadeIn().addClass('fadeInDown');
            $('#portrait h2').fadeIn().addClass('fadeInLeft');
            $('#portrait p').fadeIn().addClass('fadeInRight');

            $('#info-mini').fadeIn().addClass('fadeInUp');

            $('#social li').fadeIn().addClass('zoomIn');
        },
        onSlidePrevStart:swiper=>{
            //console.log('PrevStart',swiper.activeIndex);

            switch(swiper.activeIndex){
                case 0 :
                    $('#portrait img').fadeIn().addClass('fadeInDown');
                    $('#portrait h2').fadeIn().addClass('fadeInLeft');
                    $('#portrait p').fadeIn().addClass('fadeInRight');
                    $('#info-mini').fadeIn().addClass('fadeInUp');
                    $('#social li').fadeIn().addClass('zoomIn');

                    $('#info-page img').hide().removeClass('fadeInDown');
                    $('#info-page h2').hide().removeClass('slideInRight');
                    $('#info-page p').hide().removeClass('slideInRight');
                    $('#info-page li').hide().removeClass('fadeInUp');


                   
                    break;
                case 1:
                    $('#info-page li').map((index,item)=>{
                        $(item).css({
                            "display":"none",
                            "animationDelay":`.${index}s`
                        });
                    });
                    $('#info-page li').fadeIn().addClass('fadeInUp');
                    break;
                
            }
            

            
        },
        onSlideNextStart:swiper=>{
            // console.log('NextStart',swiper.activeIndex);
           
            switch(swiper.activeIndex){
                case 1:
                    $('#portrait img').hide().removeClass('fadeInDown');
                    $('#portrait h2').hide().removeClass('fadeInLeft');
                    $('#portrait p').hide().removeClass('fadeInRight');
                    $('#info-mini').hide().removeClass('fadeInUp');
                    $('#social li').hide().removeClass('zoomIn');

                    $('#info-page img').fadeIn().addClass('fadeInDown');
                    $('#info-page h2').fadeIn().addClass('slideInRight');
                    $('#info-page p').fadeIn().addClass('slideInRight');
                    $('#info-page li').map((index,item)=>{
                        $(item).css({
                            "display":"none",
                            "animationDelay":`.${index}s`
                        });
                    });
                    $('#info-page li').fadeIn().addClass('fadeInUp');
                    break;

                case 2:{
                    $('#info-page li').hide().removeClass('fadeInUp');
                    break;
                }


            }

           

            
        },
    });

    

    $("#info-page").on("click", "li",function() {
        let url = $(this).data("url");
        if(url){
        	window.location.href= url;
        }
    });


    QRCanvas = makdeQRCode('http://www.51creative.cn');

    $('#qr-code').on('click',function(){
    	let $mask = $('#mask');
    	let $QRCode = $mask.find('img');
 

    	if($QRCode.length<1){

            $QRCode = $(convertCanvasToImage(QRCanvas));
            $QRCode.appendTo($mask);
            /*
    		$mask.qrcode({
		    	render: 'image',
		    	size: 120,
		    	text:"http://www.51creative.cn"
		    	//background:"#5F5B67"
		    });
            */
            $mask.find('#note').appendTo($mask);
    	}
    	$mask.removeClass('hidden');

    	

    });

    $('#mask .icon-close').on('click', function(){
    	$('#mask').addClass('hidden');
    });
    
   
   
  
});

function makdeQRCode(txt){
    return $('#qr-code').qrcode({
        render: 'canvas',
        width: 120,
        height:120,
        typeNumber: -1,   
        correctLevel: 2, 
        text:txt,
        background:"transparent",
        foreground:"#1f1d29"
    }).find('canvas')[0];
}

function convertCanvasToImage(canvas) {  
    //新Image对象，可以理解为DOM  
    var image = new Image();  
    // canvas.toDataURL 返回的是一串Base64编码的URL，当然,浏览器自己肯定支持  
    // 指定格式 PNG  
    image.src = canvas.toDataURL("image/png");  
    return image;  
}  
